<script setup lang="ts">
import { ref } from 'vue'
import lightoff from './assets/light_off.svg'
import lighton from './assets/light_open.svg'

const foods = ref(['烤肉','小炒肉','饺子','拌面'])

const obj = ref({
  name:'张三',
  age:18
})
</script>


<template>
  <div>
    <!-- 列表渲染 -->
     
    <!-- 语法： key="唯一值"
        作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。
        为什么加key：Vue 的默认行为会尝试原地修改元素（就地复用） -->
     <p v-for="(item,index) in foods" :key="item">
     {{ index +1 }} {{ item }}
     </p>
     
     <!--ul： 无序列表  前面是装饰的小圆点-->
     <ul>
      <li v-for="item in foods" :key="item">
        {{ item }}
      </li>
     </ul>
      
     <!--ol: 有限列表 前面是序号 -->
     <ol>
      <li v-for="item in foods" :key="item">
        {{ item }}
      </li>
     </ol>
     
     <!-- 生成一个长度为10的数组 -->
      <!-- 鸿蒙写法  通过Array.from({length：10 }）生成固定长度的数组，用于生成指定数量的测试结构--->
      <ol>
      <li v-for="item in Array.from({length:10})">测试结构</li>
     </ol>
     
     <!-- 前端写法 循环数字，可以快速生成指定数量的测试结构，比 Array.from({ length：10}）方便 -->
     <ol>
      <li v-for="item in 10">测试结构</li>
     </ol>
     
     <!-- 支持对象循环遍历，遍历对象的键值对，了解即可 -->
     <ul>
      <li v-for="(value,key,index) in obj">
       {{ index }} {{ key }} ：{{ value }}
      </li>
     </ul>


     
  </div>
</template>

<style>

</style>
